<template>
  <div class="login-page">
    <van-nav-bar title="验证码登录" left-arrow fixed placeholder @click-left="router.back()" class="custom-nav" />
    
    <div class="login-content">
      <div class="login-header">
        <img src="@/assets/images/logo.png" alt="logo" class="logo">
        <h2 class="welcome">欢迎回来</h2>
        <p class="subtitle">请使用验证码登录</p>
      </div>

      <div class="login-form">
        <div class="input-wrapper">
          <van-field
            v-model="phone"
            name="phone"
            placeholder="请输入手机号"
            class="custom-field"
            :border="false"
            :rules="[
              { required: true, message: '请输入手机号' },
              { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }
            ]"
          >
            <template #left-icon>
              <van-icon name="phone-o" />
            </template>
          </van-field>
          
          <van-field
            v-model="sms"
            center
            name="sms"
            placeholder="请输入验证码"
            class="custom-field"
            :border="false"
            :rules="[{ required: true, message: '请输入验证码' }]"
          >
            <template #left-icon>
              <van-icon name="shield-o" />
            </template>
            <template #button>
              <van-button
                size="small"
                type="primary"
                class="code-btn"
                :disabled="!!countdown"
                @click="sendSms"
              >
                {{ countdown ? `${countdown}s后重新获取` : '获取验证码' }}
              </van-button>
            </template>
          </van-field>
        </div>

        <van-button
          block
          round
          type="primary"
          class="login-btn"
          :loading="loading"
          @click="onSubmit"
        >
          登录
        </van-button>

        <div class="action-links">
          <span class="link" @click="router.push('/auth/forgot-password')">忘记密码</span>
          <span class="link" @click="router.push('/auth/register')">注册账号</span>
        </div>
      </div>

      <div class="other-login">
        <div class="divider">其他登录方式</div>
        <div class="login-options">
          <button class="option-btn" @click="router.push('/auth/login')">
            账号密码登录
          </button>
          <button class="option-btn" @click="router.push('/auth/phone-login')">
            手机号登录
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { useUserStore } from '@/stores/user'
import { phoneRules, codeRules } from '@/utils/validate'
import { useCountdown } from '@/composables/useCountdown'

const router = useRouter()
const userStore = useUserStore()
const formRef = ref()
const { countdown, startCountdown } = useCountdown() // 使用 useCountdown composable

const formData = ref({
  phone: '',
  sms: ''
})

const loading = ref(false)

const sendSms = async () => {
  try {
    await formRef.value?.validate('phone')
    await userStore.sendSms(formData.value.phone)
    showToast('验证码已发送')
    startCountdown()
  } catch (error: any) {
    showToast(error?.message || '发送失败')
  }
}

const onSubmit = async () => {
  try {
    loading.value = true
    await userStore.smsLogin({
      phone: formData.value.phone,
      sms: formData.value.sms
    })
    showToast('登录成功')
    router.push('/home')
  } catch (error: any) {
    showToast(error.message || '登录失败')
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.login-page {
  .login-content {
    padding: 20px;
    margin-top: 50px;
  }

  .login-header {
    text-align: center;
    margin-bottom: 20px;

    .logo {
      width: 100px;
      height: 100px;
      margin-bottom: 10px;
    }

    .welcome {
      font-size: 24px;
      margin-bottom: 10px;
    }

    .subtitle {
      font-size: 16px;
      color: #666;
    }
  }

  .login-form {
    .input-wrapper {
      margin-bottom: 20px;
    }

    .custom-field {
      margin-bottom: 10px;
    }

    .code-btn {
      height: 32px;
      padding: 0 $spacing-md;
      border-radius: $radius-md;
      font-size: 14px;
      background: $primary-color !important;
      border: none;

      &:active {
        opacity: 0.8;
      }

      &.van-button--disabled {
        background: $border-color !important;
        color: $text-placeholder;
      }
    }

    .login-btn {
      margin-top: 20px;
    }

    .action-links {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      font-size: 14px;
      color: #666;
    }
  }

  .other-login {
    margin-top: 20px;

    .divider {
      text-align: center;
      margin-bottom: 10px;
      color: #666;
    }

    .login-options {
      display: flex;
      justify-content: space-around;
    }

    .option-btn {
      width: 150px;
      margin: 0 10px;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 20px;
      background-color: #f9f9f9;
      font-size: 16px;
      color: #333;
    }
  }
}
</style>



